前言

在 Day 9 文章中，我們結合 LINE 平台的功能，將天氣服務與圖片上傳服務整合，打造出第一張 LINE 圖文選單，透過 URI action 的方式觸發平台提供的互動效果。接著，我們使用客製化選單製作出 9 格的客製化圖文選單，嘗試一般實務上常見的客製化模板。

今天我們要補上圖文選單切換的功能，讓整體功能更貼合目前官方帳號圖文選單的完整體驗。

LINE 如何切換圖文選單

本節資料參考來源：Jirawatee - 透過 Rich Menu Switch Action 快速地切換 LINE 的個人化的 Rich Menu

過去設計超過六格功能的 LINE 圖文選單時，我們會考慮使用兩個選單來實現。還記得 Day 9 提到的 LINE 圖文選單可以設置「官方帳號預設圖文選單」和「個人預設圖文選單」兩種類型嗎？

我們可以設計兩個圖文選單，當使用者點擊時，LINE 平台會透過 Webhook 將對應事件傳遞至後端伺服器。接著透過 LINE Messaging API 呼叫「個人預設圖文選單 API」，將使用者的選單切換成另一張，且不會影響其他用戶的使用體驗。

LINE 後端設置圖文選單流程圖：

1. 使用者點擊 More，向 LINE 平台發送事件
2. LINE 平台透過 Webhook 將事件傳送至後端伺服器
3. 後端伺服器接收事件後，呼叫 Rich Menu API 向 LINE 平台發送變更請求
4. LINE 平台接收請求並變更該使用者的圖文選單

這樣的流程在傳輸上必然存在延遲問題，因為需要經過後端伺服器處理後再返回給使用者，導致點擊時會產生明顯的卡頓感，影響使用者體驗。

LINE Rich Menu Switch Action 流程圖：

這個功能是為了解決上述提及的卡頓問題而生，能有效降低傳輸成本，提升切換體驗 !

事前準備：需要為待切換的圖文選單設定別名，定義從 A 圖文選單點擊後要切換到哪個圖文選單

1. 使用者點擊More，向 LINE 平台發送事件
2. LINE 平台根據圖文選單切換別名，直接切換到對應的圖文選單

Tips：這部分實際在在後端伺服器還是會收到圖文選單變更的事件，但不需要由後端主動發起變更圖文選單的請求

LINE Rich Menu Switch Action 實作

LINE 官網 LINE Richmenu Action 資訊

在 Day 9 設置 Line Richmenu Area Action 的時候，我們只使用了 Message action 及 URI action 的部分。實際上還有一個特殊的 Rich Menu Switch Action，專門用於切換不同的 LINE 圖文選單。

今天將基於 Day9 的九格客製化模板，新增兩個圖文選單切換按鈕。

回到 Canva 設計工具，將按鈕補上後變成 10 個區塊的完整版本。

Step 1：將 LINE 圖文選單背景圖片改良成 10 個區塊

這邊注意我們需要兩個圖文選單，所以也需要兩張背景圖喔！
(創建 LINE 圖文選單的方式同樣透過 Canva，流程與 Day 9 相同)

Line 圖文選單 1 號選手(別名：richmenu-player-1)

這邊特別讓選單 1小一點，是為了凸顯當前是選單 1 的狀態，背景圖就需要設計被點擊到的狀態

Line 圖文選單 2 號選手(別名：richmenu-player-2)

這邊特別讓選單 2小一點，是為了凸顯當前是選單 2 的狀態，背景圖就需要設計被點擊到的狀態

Step 2：在 LINE Bot Designer 設計圖文選單區塊與事件

這邊會以圖文選單 1 號選手為例教學

由於 LINE Bot Designer 不支援 Rich Menu Switch Action 的直接配置，為了讓大家能快速體驗切換效果，我們先將需要設定的部分暫時使用「訊息事件」替代，後續再手動調整 JSON 內容。

Step 3：調整圖文選單創建的 JSON（LINE Bot Designer 右下角部分）

特別注意圖文選單有參數 name 建議可以改成好理解的識別名稱
(撈出圖文選單列表的時候會比較好區分)

雖然 LINE Bot Designer 可以快速建立 Rich Menu 的完整骨架，但無法直接設置 Rich Menu Switch Action。因此我們需要手動調整「選單 1」和「選單 2」的切換設定。

修改前：使用訊息(message)回覆方式

{
  "bounds": {
    "x": 0,
    "y": 0,
    "width": 1250,
    "height": 422
  },
  "action": {
    "type": "message",
    "text": "選單 1(圖文選單 1 號選手)"
  }
}

修改後：改為 richmenuswitch 方式

{
  "bounds": {
    "x": 0,
    "y": 0,
    "width": 1250,
    "height": 422
  },
  "action": {
    "type": "richmenuswitch",
    "richMenuAliasId": "richmenu-player-1", // 定義每張 Line 圖文選單別名
    "data":"Line 圖文選單目前切換到選手 1 號囉！" // 切換的時候後端可以接收到對應的訊息
  }
}

透過以上方式修改「選單 1」和「選單 2」的 action 設定後，接著使用 Postman 進行 API 設置。

Step 4：Postman 創建 LINE 圖文選單

設定流程與 Day 9 大致相同

1. 創建 LINE 圖文選單骨架：此階段會產生圖文選單編號。特別注意需要套用 Step 3 修改的 richmenuswitch 類型 JSON，並且需要創建兩個圖文選單！
2. 上傳背景圖片：將各自的背景圖片上傳到對應的圖文選單編號
3. 設定 LINE 官方帳號預設圖文選單：此步驟僅需要設置「選手 1 號」，「選手 2 號」則透過 Rich Menu Switch Action 切換顯示

主要設定 API：：

1. 建立圖文選單骨架：建立圖文選單基礎架構，需上傳 Step 3 修改的 richmenuswitch 類型 JSON
2. 取得圖文選單列表：查詢目前所有圖文選單資訊，確認後續要設定別名的圖文選單對應資料。
3. 上傳圖文選單背景圖片：為指定的圖文選單編號上傳背景圖片，兩個圖文選單都需要使用
4. 設定預設圖文選單：將「選手 1 號」設為官方帳號預設選單

Step 5：LINE 圖文選單別名設定

設定別名前必須先完成 Step 4 的流程！！

主要設定 API：：

• 設定 LINE 圖文選單別名：為兩個圖文選單分別建立別名，供 Rich Menu Switch Action 切換使用

錯誤修正時可能用到的 API：

• 刪除 LINE 圖文選單骨架
• 刪除 LINE 圖文選單別名

刪除圖文選單時，別名不會自動清除，需要手動刪除，這部分很重要喔！！

成果展示

成功實作 LINE Rich Menu Switch Action！透過圖文選單別名設定，實現兩個自定義選單間的切換，解決了過去需要在後端伺服器透過 Rich Menu API 切換的延遲問題。

本週結語

本週我們完成了 LINE 圖文選單功能的完整升級歷程，從最初的固定模版圖文選單設計，逐步發展到客製化選單的彈性配置，最終實現了圖文選單切換功能。這項功能在 LINE Bot 實務應用中常見且重要，一般來說，多數應用場景都是採用 2~3 個模板進行動態切換，以滿足不同使用情境的需求。

若未來需要更進階的應用，例如根據會員登入狀態來顯示不同的專屬選單，這類個人化功能仍需透過後端伺服器進行使用者身份驗證，再採用傳統的 Rich Menu API 呼叫方式來動態變更個人專屬的圖文選單。